<!--
 *商品列表
 * @Author: 舒克
 * 需要完善：分页全局合并
 * @Official Accounts: 氧化1028
 * @email: 143587623@qq.com
 * @github: https://gitee.com/KingSio
 * @Date: 2021-02-24 19:04:35
 * @LastEditTime: 2021-03-05 20:18:48
 * @FilePath: \个人项目\vue\1.vue全站管理系统\vue_shop\src\components\goods\List.vue
-->
<template>
  <div>
    <el-card class="box-card">
      <!-- 搜索与添加 clearable代表清空-->
            <div class="table_data">
      <el-row :gutter="20">
        <el-col :span="6">
          <!-- <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList">
            <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
          </el-input> -->
      <SearchCommon @searchName="searchName"></SearchCommon>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="goAddpage">添加商品</el-button>
        </el-col>
      </el-row>
</div>
      <!-- table表格区域 stripe:隔行变色 fixed:固定列，内容过多了，使用 resizable禁用拖动表格-->
      <el-table :data="goodslist" border stripe width="65px" >
      <el-table-column type="index"></el-table-column>
      <el-table-column label="商品名称" prop="goods_name" width="200px"></el-table-column>
      <el-table-column label="商品价格" width="80px" prop="goods_price"></el-table-column>
      <el-table-column label="商品重量" width="80px" prop="goods_weight"></el-table-column>
      <el-table-column label="商品数量" width="80px" prop="goods_number"></el-table-column>
      <el-table-column label="添加时间" width="130px" prop="add_time">
       
      </el-table-column>
      <el-table-column label="更改时间" width="130px" prop="upd_time"></el-table-column>
      <el-table-column label="热销品数量" width="100px" prop="hot_mumber"></el-table-column>
      <el-table-column label="是否是热销品" width="100px" prop="is_promote"></el-table-column>
      <el-table-column label="商品状态" width="100px" prop="goods_state"></el-table-column>
    
      <el-table-column label="操作" width="200px" fixed="right">
        <template slot-scope="scope"  >
             <el-button v-if="scope" type="primary"  size="mini" icon="el-icon-edit" >编辑</el-button>
             <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(scope.rwo.good_id)">删除</el-button>
        </template>
      </el-table-column>
      
      </el-table>
      
      <!-- 分页区域 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      >
    </el-pagination>
    </el-card>
  </div>
</template>
<script>
import { getGoodsListData ,removeGoodsListData} from '@/api/commodityApi'
import { filterTimeData } from '@/utils/timeData'
import SearchCommon from '../common/SearchCommon2'
export default {
  data() {
    return {
        //查询参数的对象
    queryInfo: {
        //需要发送给后端的参数，拿到用户列表
        query: '',
        pagenum: 1, //当前的页数
        pagesize: 5 //当前每页显示多少条数据
      },

      //商品列表数据
      goodslist:[],
      //总数据条数
      total:0
    }
  },
  components: {
    SearchCommon //搜索组件
  },
  created() {
    this.getGoodsListData()
  },
  computed:{
   
  },
  methods:{
      //获取商品列表
     async getGoodsListData(){  
         const {data:res}=await getGoodsListData(this.queryInfo)
         if(res.meta.status!==200){
             return this.$message.error("获取商品列表失败")
         }
         this.$message.success("获取商品列表成功")
         console.log(res.data)

         //时间戳转换，循环获取数组内容进行转换
         res.data.goods.forEach(item => {
            item.add_time=filterTimeData(item.add_time) 
         });
           console.log(res.data.goods)
        
         this.goodslist=res.data.goods;//获取到的数据赋值
         this.total=res.data.total;//获取到的总条数
         this.filterTimeData

     },
     goAddpage(){
          this.$router.push({
           path: "/goods/add"
        })
     },
     
     //搜索事件
     searchName(val){
       console.log(val)
       this.queryInfo.query=val;//搜索的内容赋值给后端参数
       this.getGoodsListData()//再次请求一下，因为绑定在data的数据已经改变了
     },

    //删除事件-表格每一个的删除事件
    async removeById(id){
        const confirmRes=await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((err) => {err});
        if(confirmRes!=="cofirm") {
          return this.$message.info("已经取消删除")
        }
        const {data:res}= await removeGoodsListData(id)
        
        if(res.meta.status!==200){
          return this.$message.error("删除失败")
        }
        this.$message.success("删除成功")
        this.getGoodsListData();//删除数据

     
  
    },
     //pageSize条数据 改变时会触发,分页
     handleSizeChange(newSize){
       this.queryInfo.pagesize=newSize;
       //重新获取数据,调用接口，因为这时候，数据在data上已经变化，this.queryInfo.pagesize=xx
       this.getGoodsListData()
     },
     handleCurrentChange(newPage){
       this.queryInfo.pagenum=newPage
        this.getGoodsListData()
     }
  }
}
</script>
<style lang="less" scoped>
.el-table-column{
  border-bottom: 1px solid #CCCCCC;
 
}
/deep/ .el-table th>.cell {
  text-align:center ;
}

</style>
